<template>
	<view>
		<view class="top">
			<view class="name">问题类型</view>
			<view class="u-flex" style="align-items: center;justify-content: space-between;margin-top: 40rpx;">
				<view v-for="nav in groupState" :key="nav.code" @tap="onNav(nav.code)">
					<view class="item-title" :class="{ 'item-title-active': stateId === nav.code }">{{ nav.name }}</view>
				</view>
			</view>
		</view>
		<view class="bott">
			<view class="name">问题描述</view>
			<view class="shurukuang">
				<textarea  placeholder="请输入您的问题描述"
					@input="descInput" maxlength="200" v-model="dataInfo" />


				<text style="position: absolute;
			                right: 32rpx;bottom: 20rpx;
			                font-size:24rpx;
			                color: #646464;">{{ start }}/200</text>
			</view>
		</view>
	<view class="u-flex u-col-center u-row-center sign-box">
		<view class="bot-btn" @click="submit()">提交</view></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				groupState: [
					// {
					// 	id: 1,
					// 	title: '程序问题'
					// },
					// {
					// 	id: 2,
					// 	title: '使用问题	'
					// },
					// {
					// 	id: 3,
					// 	title: '加盟问题'
					// },
					// {
					// 	id: 4,
					// 	title: '其他问题'
					// }
				],
				stateId: "product",
				start: 0,
				dataInfo: ''
			};
		},
		mounted() {
			this.feedbackType()	
		},
		methods: {
			feedbackType() {
				let that = this;
				that.$http('other.feedbackType', {
				}, '加载中...').then(res => {
					if (res.code === 1) {
						that.groupState=res.data
							}
				});
			},
			submit(){
				let that = this;
				let data={
					type:that.stateId,
					content:that.dataInfo
				}
				that.$http('other.feedbackAdd',data, '提交中...').then(res => {
					if (res.code === 1) {
						that.$u.toast('提交成功');
						that.$Router.back();
					}
				});

			},
			onNav(id) {
				if (this.stateId !== id) {
					this.stateId = id;
				}
			},
			descInput() {
				let txtVal = this.dataInfo.length;
				this.start = txtVal;
			}
		}
	}
</script>

<style lang="scss">
	.item-title {
		width: 152rpx;
		height: 64rpx;
		border-radius: 32rpx;
		border: 1px solid #E5E5E5;
		color: #B5B5B5;
		line-height: 64rpx;
		text-align: center;
	}

	.item-title-active {
		width: 152rpx;
		height: 64rpx;
		background: #010101;
		border-radius: 32rpx;
		color: #ffffff;
		line-height: 64rpx;
		text-align: center;
	}

	.top {
		height: 230rpx;
		background: #ffffff;
		margin-top: 20rpx;
		padding: 32rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #010101;
	}

	.bott {
		background: #ffffff;
		margin-top: 20rpx;
		padding: 32rpx;
		// height: 100vh;
	}

	.shurukuang textarea {
	    width: 100%;
	    height: 350rpx;
	    background-color: #ffffff;
	    border-radius: 10rpx;
	    padding: 20rpx;
	}

	.shurukuang {
		    position: relative;
		    top: 32rpx;
		    width: 100%;
		    height: 420rpx;
	}
	.bot-btn{
		width: 680rpx;
		height: 90rpx;
		background: #010101;
		border-radius: 46rpx;
		color:#ffffff;
		line-height: 90rpx;
		text-align: center;
		    position: absolute;
		    bottom: 40rpx;
		
	}
</style>
